<template>
  <!-- 模块1 -->
  <div class="modular">
    <div class="modular_top">
      <div class="triangle"></div>
      <div class="modular_icon">
        <img src="@/assets/img/wb.png" alt="">
      </div>
      <h2>维保/安防统计</h2>
    </div>
    <div class="maintain_cont">
      <div class="item">
        <ul>
          <li><span class="circular color1"></span><span>巡检</span><span class="color1">{{ data.mtIns
          }}</span><span>次</span></li>
          <li><span class="circular color2"></span><span>维修</span><span class="color2">{{ data.mtRepair
          }}</span><span>次</span></li>
          <li><span class="circular color3"></span><span>保养</span><span class="color3">{{ data.mtWell
          }}</span><span>次</span></li>
          <li><span class="circular color4"></span><span>水箱清洗</span><span class="color4">{{ data.mtClear
          }}</span><span>次</span>
          </li>
        </ul>
        <div class="chart-container">
          <div class="chart" ref="chart"></div>
          <div class="bg"></div>
        </div>
      </div>
      <div class="item_line"></div>
      <div class="item">
        <div class="play">
          <div class="img">
            <img src="@/assets/img/sp.png" alt="">
          </div>
          <div class="play_cont">
            <ul>
              <li><span>视频</span><span>{{ data.cameraTotal }}</span><span></span></li>
              <li><span>安装率</span><span>{{ data.cameraRate }}</span><span>%</span></li>
              <li><span>正常</span><span>{{ data.cameraNormal }}</span><span></span></li>
              <li><span>离线</span><span>{{ data.cameraOff }}</span><span></span></li>
            </ul>
          </div>
        </div>
        <div class="play">
          <div class="img">
            <!-- <img src="@/assets/img/mj.png" alt=""> -->
            <img src="@/assets/img/video.png" alt="">
          </div>
          <div class="play_cont">
            <ul>
              <li><span>门禁</span><span>{{ data.acTotal }}</span><span></span></li>
              <li><span>安装率</span><span>{{ data.acRate }}</span><span>%</span></li>
              <li><span>正常</span><span>{{ data.acNormal }}</span><span></span></li>
              <li><span>离线</span><span>{{ data.acOff }}</span><span></span></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as api from '@/assets/utils/api.js'
import { getPie3D, getParametricEquation } from '@/assets/js/chart.js' //工具类js，页面路径自己修改
// 37aeea蓝色 cd5a2d橙色 28d4b2青色 ebd675 黄色
const color = ['#28d4b2', '#cd5a2d', '#37aeea', '#ebd675']
// const color = ['#28d4b2', '#cd5a2d', '#37aeea', '#ebd675']

export default {
  name: 'chart',
  data() {
    return {
      data: [],
      siteId: null,
      optionData: [
        {
          name: '保养',
          value: 7
        },
        {
          name: '巡检',
          value: 23
        },
        {
          name: '水箱清洗',
          value: 16
        },
        {
          name: '维修',
          value: 9
        }
      ],
      statusChart: null,
      option: {}
    }
  },
  created() {
    this.getData(this.siteId)
  },
  mounted() {
    window.onresize = () => {
      this.statusChart.resize()
    }
  },
  methods: {
    async getData(idNum) {
      // 接口参数
      const id = { tenantid: 1128, siteId: idNum }
      const res = await api.maintain(id)
      this.data = res.data[0]
      this.data.acRate = this.data.acRate.substring(0, this.data.acRate.length - 1)
      this.data.cameraRate = Number(this.data.cameraRate).toFixed(0)
      if(this.data){
        this.optionData[0].value = parseInt(this.data.mtWell) ? parseInt(this.data.mtWell) : ''
        this.optionData[1].value = parseInt(this.data.mtIns) ? parseInt(this.data.mtIns) : ''
        this.optionData[2].value = parseInt(this.data.mtClear) ? parseInt(this.data.mtClear) : ''
        this.optionData[3].value = parseInt(this.data.mtRepair) ? parseInt(this.data.mtRepair) : ''
      }
      this.setLabel()
      this.initChart()
    },
    changeData(value) {
      this.getData(Number(value))
    },
    // 初始化label样式
    setLabel() {
      this.optionData.forEach((item, index) => {
        item.itemStyle = {
          color: color[index]
        }
        item.label = {
          normal: {
            show: true,
            color: color[index],
            formatter: [
              '{b|{b}}',
              '{c|{c}}{b|台}',
              '{d|{d}%}'
            ].join('\n'), // 用\n来换行
            rich: {
              b: {
                color: '#fff',
                lineHeight: 25,
                align: 'left'
              },
              c: {
                fontSize: 22,
                color: '#fff',
                textShadowColor: '#1c90a6',
                textShadowOffsetX: 0,
                textShadowOffsetY: 2,
                textShadowBlur: 5
              },
              d: {
                color: color[index],
                align: 'left'
              }
            }
          }
        }
        item.labelLine = {
          normal: {
            lineStyle: {
              width: 1,
              color: 'rgba(255,255,255,0.7)'
            }
          }
        }
      })
    },
    fontSize(res) {
      const clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
      if (!clientWidth) return
      let fontSize = clientWidth / 4000
      return res * fontSize
    },
    // 图表初始化
    initChart() {
      this.statusChart = this.$echarts.init(document.querySelector('.chart'))
      // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
      this.option = getPie3D(this.optionData, 0.93, 130, 28, 40, 1)
      this.statusChart.setOption(this.option)
      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
      // this.option.series.push({
      //   name: '电梯状态', //自己根据场景修改
      //   backgroundColor: 'transparent',
      //   type: 'pie',
      //   label: {
      //     opacity: 1,
      //     fontSize: 13,
      //     lineHeight: 20
      //   },
      //   startAngle: -40, // 起始角度，支持范围[0, 360]。
      //   clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
      //   radius: ['20%', '50%'],
      //   center: ['50%', '50%'],
      //   data: this.optionData,
      //   itemStyle: {
      //     opacity: 0  //这里必须是0，不然2d的图会覆盖在表面
      //   }
      // })
      this.statusChart.setOption(this.option)
      this.bindListen(this.statusChart)
    },
    // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
    // optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
    bindListen(myChart, optionName = 'option') {
      let hoveredIndex = ''
      // 监听 mouseover，近似实现高亮（放大）效果
      myChart.on('mouseover', (params) => {
        // 准备重新渲染扇形所需的参数
        let isSelected
        let isHovered
        let startRatio
        let endRatio
        let k
        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
        if (hoveredIndex === params.seriesIndex) {
          // 否则进行高亮及必要的取消高亮操作
        } else {
          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
          if (hoveredIndex !== '') {
            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
            isSelected = this[optionName].series[hoveredIndex].pieStatus.selected
            isHovered = false
            startRatio = this[optionName].series[hoveredIndex].pieData.startRatio
            endRatio = this[optionName].series[hoveredIndex].pieData.endRatio
            k = this[optionName].series[hoveredIndex].pieStatus.k
            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
            this[optionName].series[
              hoveredIndex
            ].parametricEquation = getParametricEquation(
              startRatio,
              endRatio,
              isSelected,
              isHovered,
              k,
              this[optionName].series[hoveredIndex].pieData.value
            )
            this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered
            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
            hoveredIndex = ''
          }
          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
          if (
            params.seriesName !== 'mouseoutSeries' &&
            params.seriesName !== 'pie2d'
          ) {
            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
            isSelected =
              this[optionName].series[params.seriesIndex].pieStatus.selected
            isHovered = true
            startRatio =
              this[optionName].series[params.seriesIndex].pieData.startRatio
            endRatio = this[optionName].series[params.seriesIndex].pieData.endRatio
            k = this[optionName].series[params.seriesIndex].pieStatus.k
            // 对当前点击的扇形，执行高亮操作（对 option 更新）
            this[optionName].series[
              params.seriesIndex
            ].parametricEquation = getParametricEquation(
              startRatio,
              endRatio,
              isSelected,
              isHovered,
              k,
              this[optionName].series[params.seriesIndex].pieData.value + 20
            )
            this[optionName].series[
              params.seriesIndex
            ].pieStatus.hovered = isHovered
            // 记录上次高亮的扇形对应的系列号 seriesIndex
            hoveredIndex = params.seriesIndex
          }
          // 使用更新后的 option，渲染图表
          myChart.setOption(this[optionName])
        }
      })
      // 修正取消高亮失败的 bug
      myChart.on('globalout', () => {
        // 准备重新渲染扇形所需的参数
        let isSelected
        let isHovered
        let startRatio
        let endRatio
        let k
        if (hoveredIndex !== '') {
          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
          isSelected = this[optionName].series[hoveredIndex].pieStatus.selected
          isHovered = false
          k = this[optionName].series[hoveredIndex].pieStatus.k
          startRatio = this[optionName].series[hoveredIndex].pieData.startRatio
          endRatio = this[optionName].series[hoveredIndex].pieData.endRatio
          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
          this[optionName].series[
            hoveredIndex
          ].parametricEquation = getParametricEquation(
            startRatio,
            endRatio,
            isSelected,
            isHovered,
            k,
            this[optionName].series[hoveredIndex].pieData.value
          )
          this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered
          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
          hoveredIndex = ''
        }
        // 使用更新后的 option，渲染图表
        myChart.setOption(this[optionName])
      })
    },
    // 自适应宽高
    changeSize() {
      this.statusChart.resize()
    }
  }
}
</script>

<style lang="scss" scoped>
.modular {
  // margin: .18rem 0;

  .maintain_cont {
    padding: .6rem .29rem 0.15rem .29rem;
    display: flex;
    justify-content: space-between;

    .item_line {
      width: 2px;
      height: 1.81rem;
      background: #5fa1ff;
      opacity: 0.6;
      margin-top: .1rem;
      position: relative;

      &::after {
        content: "";
        width: 2px;
        height: 95%;
        background: #2b518a;
        position: absolute;
        left: 0;
        top: 2%;
      }
    }

    .item {
      width: 40%;
      position: relative;
      display: flex;
      justify-content: space-between;
      flex-direction: column;

      &:nth-child(1) {
        .color2 {
          color: #EED55F !important;
          background-color: #EED55F !important;
        }

        .color3 {
          color: #39E0BE !important;
          background-color: #39E0BE !important;
        }

        .color4 {
          color: #53BBF0 !important;
          background-color: #53BBF0 !important;
        }

        li {
          width: 100%;
          font-size: 0.16rem;
          display: flex;
          align-items: center;
          color: #fff;
          padding-bottom: .1rem;
          justify-content: space-between;

          span {
            font-size: .14rem;
            color: #fff;
            font-weight: 400;

            // font-family: 'din';
            // font-weight: 400;
            &:nth-child(2) {
              // color: #EED55F;
              // padding-left: .15rem;
              letter-spacing: .28rem;
              white-space: nowrap;
              width: 40%;
            }

            &:nth-child(3) {
              color: #DB7046;
              font-family: "arial";
              font-size: .16rem;
              font-weight: bold;
              // margin: 0 .17rem 0 -0.08rem;
              width: 25%;
              text-align: center;
              background: transparent !important;
            }
          }

          &:nth-child(4) {
            span {
              letter-spacing: 0;

              &:nth-child(3) {
                font-size: 0.26rem;
              }
            }
          }

          .circular {
            width: .1rem;
            height: .1rem;
            background: #DB7046;
            border-radius: 5px;
          }
        }

        .chart-container {
          position: relative;
          width: 100%;
          height: 45%;

          .chart {
            width: 150%;
            height: 150%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -65%);
            z-index: 1;
          }

          .bg {
            position: absolute;
            bottom: 21%;
            left: 50%;
            width: 76%;
            height: 75%;
            z-index: 0;
            border-radius: 50%;
            background: no-repeat center;
            box-shadow: 0 0 5px 1px rgba(5, 148, 214, 0.7);
            background-image: url(/src/assets/img/aperture.png);
            background-size: 100% 100%;
            transform: translateX(-50%);
          }
        }
      }


      &:nth-child(3) {
        width: 53%;
        font-size: .16rem;

        .play {
          display: flex;
          justify-content: space-around;
          align-items: center;
          margin-bottom: 0.1rem;

          div {
            width: 34%;
            margin-bottom: 0.1rem;
          }

          .img {
            width: 34%;

            img {
              width: 100%;
            }
          }

          .play_cont {
            span {
              color: #fff;
              font-size: .12rem;

              &:nth-child(1) {
                letter-spacing: 0.12rem;
                white-space: nowrap;
                display: flex;
                // padding-right: .07rem;
              }

              &:nth-child(2) {
                font-size: .15rem;
                font-family: "arial";
                color: #87CBFF;
                font-weight: 400;
              }
            }

            li {
              display: flex;
              align-items: center;
              padding-bottom: .05rem;

              span {
                &:nth-child(1) {
                  width: 60%;
                }

                &:nth-child(2) {
                  width: 30%;
                  margin: 0 auto;
                  text-align: center;
                }

                &:nth-child(3) {
                  width: 5%;
                }
              }

              // padding-left: 0.1rem;
              &:nth-child(2) {
                span {
                  letter-spacing: 0;
                  white-space: nowrap;

                  &:nth-child(2) {
                    // padding-left: .1rem;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
